{% load i18n %}
{% if comments %}
<div class="box box-widget">
  <div class="box-header with-border">
    <div class="user-block">
      <span class="username"><i class="fa fa-comments"></i> 历史评论</span>
    </div>
  </div>
  <div class="box-body" style="max-height: 400px; overflow-y: auto;">
    {% for comment in comments %}
    <div class="post" style="border-bottom: 1px solid #f4f4f4; padding-bottom: 10px; margin-bottom: 10px;">
      <div class="user-block">
        <img class="img-circle img-bordered-sm" 
             src="{{ comment.created_by.avatar_url|default:'/static/adminlte/img/avatar04.png' }}" 
             alt="User Image"
             style="object-fit: cover; object-position: center; width: 35px; height: 35px;">
        <span class="username">
          <a href="#">{{ comment.created_by.get_full_name|default:comment.created_by.username }}</a>
        </span>
        <span class="description" title="{{ comment.created_at }}">
          {{ comment.created_at|timesince }}前
        </span>
      </div>
      <div class="post-content" style="margin-left: 45px; margin-top: 5px;">
        {{ comment.content|linebreaksbr }}
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% else %}
<div class="callout callout-info">
  <h4><i class="fa fa-info"></i> 提示</h4>
  <p>还没有人评论，来添加第一个评论吧！</p>
</div>
{% endif %}

{% if messages %}
<div id="django-messages" hx-swap-oob="innerHTML:#django-messages">
  {% for message in messages %}
  <div name="message" style="padding:10px; margin-bottom:15px;"
    class="alert alert-{% if message.tags %}{{ message.tags }}{% endif %} no-print">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
    <b style="margin-right: 20px;">{{message}}</b>
  </div>
  {% endfor %}
</div>
{% endif %}